<template>
<div>
<!--  基本信息-->
  <el-card>
    <el-descriptions title="个人信息" direction="vertical" :column="3" border>
      <el-descriptions-item label="用户名">{{ userForm.userName }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ userForm.gender }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{ userForm.account }}</el-descriptions-item>
      <el-descriptions-item v-if="userForm.status===0" label="身份">管理员</el-descriptions-item>
      <el-descriptions-item v-else label="身份">普通用户</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ userForm.phone }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
<!--  修改个人信息-->
  <el-card>
    <strong>修改信息</strong>
    <p class="notice">标示有 * 的项目为必填项</p>
    <el-descriptions class="margin-top" :column="1" style="margin-top: 20px" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        <div style="text-align: center">{{ userForm.userName}}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号 *
        </template>
        <el-input placeholder="请输入手机号" v-model="editForm.phone"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
            当前密码 *
        </template>
        <el-input placeholder="请输入当前密码" show-password v-model="editForm.old_pwd"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          新密码 *
        </template>
        <el-input placeholder="请输入新密码" show-password v-model="editForm.new_pwd"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-aim"></i>
         确认密码 *
        </template>
        <el-input placeholder="请确认新密码" show-password v-model="editForm.confirm_pwd"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <el-button type="primary" class="change-btn" @click="Update">确认</el-button>
  </el-card>
<!--  上传头像-->
  <el-card>
    <strong>上传头像</strong>
    <p class="notice">您的头像将会显示在网页右上方，一次只能只用一个图片。</p>
    <el-divider style="margin: 5px"></el-divider>
    从电脑上传图片
    <div style="margin-left: 40%">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        style="margin: 5px">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

  </el-card>
</div>
</template>

<script>

import {FindUserByAccount,UpdateUser} from "@/api";

export default {
  name: "PersonContent",
  data() {
    return {
      imageUrl: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      userForm:{},
      editForm:{
        phone:'',
        old_pwd:'',
        new_pwd:'',
        confirm_pwd:''
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    Update(){
      if(this.editForm.new_pwd === this.editForm.confirm_pwd){
        UpdateUser({
          "account":this.userForm.account,
          "userName":this.userForm.userName,
          "phone":this.editForm.phone ,
          "pswd":this.editForm.new_pwd,
          "status":this.userForm.status,
          "gender":this.userForm.gender
        }).then(res=>{
          if(res.status===200){
            this.$message.success('修改成功！')
          }
        })
      }else{
        this.$message.warning("两次输入密码不正确！")
      }
    }
  },
  created() {
    FindUserByAccount(this.GLOBAL.account).then(res=>{
      // console.log(res.data)
      this.userForm=res.data[0]
      console.log(this.userForm)
    })
  }

}
</script>

<style scoped>
.el-card{
 margin: 20px 100px 20px 100px
}
.el-input{
  width: 60%;
  margin-left: 20%;
}
.change-btn{
  margin-left: 45%;
  margin-top: 20px;
  width: 100px
}
.notice{
    font-size: small;
    color: red;
    margin-top: 5px;
    margin-bottom: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 170px;
  height: 170px;
  line-height: 170px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
